<template>
  <el-dropdown v-bind="elProps" @command="handleClick" class="box">
     <div >
       {{value}}<el-icon class="el-icon--right"><arrow-down /></el-icon>
      </div>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item
          :command="value.title"
          v-for="(value, index) in options"
          :key="index"
          >{{ value.title }}</el-dropdown-item
        >
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>
<script setup>
import { ref,watch } from "vue";
import { ArrowDown } from "@element-plus/icons-vue";
const props = defineProps({
  elProps: Object,
  modelValue: [Object, String],
  options: Object,
});
const list = props.options;
const value = ref("");
value.value = props.modelValue;
watch(()=>props.modelValue,(newval)=>{
value.value = newval
})
const emit = defineEmits(["update:modelValue"]);
const handleClick = (command) => {
  console.log(command);
  value.value = command;
  emit("update:modelValue", value.value);
};
</script>

<style  scoped>
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}

.box :focus {
     outline: none !important;
     /* color: red; */
}
</style>